/**
 * Created by rongyao on 2017/11/13.
 */
import React from 'react'
import {Link} from 'react-router'
import {Provider, connect} from 'react-redux'
import {increase, fetchNews,fetchProduct} from '../../actions/counter'
import {Carousel} from 'react-bootstrap'
import './home.scss'
class Home extends React.Component {
	
	componentWillMount() {
		this.props.fetchNews();
		this.props.fetchProduct()
	}
	
	render() {
		var {newsList, fetchNews,productList} = this.props;
		var newsContent = [];
		var productContent=[];
		if (productList.rows&&productList.rows.length>0) {
			for (var i = 0; i < 3; i++) {
				var lujin = "http://localhost:3000/"+productList.rows[i].pic[0].filename;
				if(i%2!=0){
					productContent.push(<div className="row featurette">
						<div className="col-md-7">
							<h2 className="featurette-heading">First featurette heading. <span className="text-muted">It'll blow your mind.</span></h2>
							<p className="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
						</div>
						<div className="col-md-5">
							<img className="featurette-image img-responsive center-block" src={lujin} alt="Generic placeholder image" style={{width:"300px",height:'300px'}}/>
						</div>
					</div>)
				}else{
					productContent.push(<div className="row featurette">
						<div className="col-md-5">
							<img className="featurette-image img-responsive center-block" src={lujin} alt="Generic placeholder image" style={{width:"300px",height:'300px'}}/>
						</div>
						<div className="col-md-7">
							<h2 className="featurette-heading">First featurette heading. <span className="text-muted">It'll blow your mind.</span></h2>
							<p className="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
						</div>
					</div>)
				}
			}
				
			
		}
		if (newsList.rows&&newsList.rows.length>0) {
			for (var i = 0; i < 3; i++) {
				var lujin = "http://localhost:3000/"+newsList.rows[i].pic.filename;
				newsContent.push(<div className="col-lg-4" key={i}>
					<img className="img-circle" src={lujin} alt="Generic placeholder image" width="140" height="140"/>
					<h2>Heading</h2>
					<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh
						ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
						Praesent commodo cursus magna.</p>
					<p><a className="btn btn-default" href="#" role="button">View details &raquo;</a></p>
				</div>)
			}
		}
		return (
			<div>
				<Carousel>
					<Carousel.Item>
						<img style={{width: '100%', height: '500px'}} alt="900x500" src="./src/img/timg.jpg"/>
					</Carousel.Item>
					<Carousel.Item>
						<img style={{width: '100%', height: '500px'}} alt="900x500" src="./src/img/timg (1).jpg"/>
					</Carousel.Item>
					<Carousel.Item>
						<img style={{width: '100%', height: '500px'}} alt="900x500" src="./src/img/timg.gif"/>
					</Carousel.Item>
				</Carousel>
				<div  className="container">
				<h3>最新新闻</h3>
				<div className="row" style={{textAlign:'center'}}>
					{newsContent}
				</div>
				<h3>推荐产品</h3>
				<div className="row" style={{textAlign:'center'}}>
					{productContent}
				</div>
				</div>
			</div>
		)
	}
}

const getValue = (state) => {
	return {
		value: state.count,
		newsList: state.newsList,
		productList: state.productList
	}
}
const HomeContext = connect(
	getValue,
	{increase, fetchNews,fetchProduct}
)(Home)

module.exports = HomeContext